import { addCSSWithId, addPrefixToCssText, removeElementBySelector } from '../utils/domUtil'
import _ from 'lodash'

export default {
  data() {
    return {
      pluginUniqueId: undefined
      
    }
  },
  beforeDestroy() {
    // 清除自定义样式
    removeElementBySelector('#' + this.pluginUniqueId)
  },
  watch: {
    'config.customStyle': function (customStyle) {
      removeElementBySelector('#' + this.pluginUniqueId)
      if (this.config.customStyle) {
        addCSSWithId(addPrefixToCssText(this.config.customStyle, '.' + this.pluginUniqueId), this.pluginUniqueId)
      }
    },
    'exist': function() {
      if (this.exist) {
        this.$nextTick(() => {
          this.$el.classList && this.$el.classList.add(this.pluginUniqueId)
          if (this.config.customStyle) {
            addCSSWithId(addPrefixToCssText(this.config.customStyle, '.' + this.pluginUniqueId), this.pluginUniqueId)
          }
        })
      } else {
        removeElementBySelector('#' + this.pluginUniqueId)
      }
    }
  },
  created() {
    if (this.config && this.config.componentId) {
      this.pluginUniqueId = this.config.componentId
    } else {
      this.pluginUniqueId = _.uniqueId('pluginUniqueId')
    }
    if (this.config.customStyle) {
      addCSSWithId(addPrefixToCssText(this.config.customStyle, '.' + this.pluginUniqueId), this.pluginUniqueId)
    }
  },
  mounted() {
    // 自定义样式 v-if 为false的时候classList 是不存在的。
    this.$el.classList && this.$el.classList.add(this.pluginUniqueId)
  }
}
